<template>
	<view class="map">
		<scroll-view scroll-y class="m1">
			<view class="m2" v-for="item in list" :style="{backgroundColor:suijiyanse()}">
				<text>{{item.lineName}}</text>
			</view>
		</scroll-view>
		<scroll-view scroll-y>
			<image :src="'http://124.93.196.45:10001'+map.imgUrl"></image>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				map:{}
			}
		},
		onLoad() {
			this.getlist()
			this.getmap()
		},
		methods: {
			getlist(){
				this.api.get('/prod-api/api/metro/line/list').then(res=>{
					this.list=res.data.data
				})
			},
			getmap(){
				this.api.get('/prod-api/api/metro/city').then(res=>{
					this.map=res.data.data
				})
			},
			suijiyanse(){
				let r,g,b;
				r=Math.floor(Math.random()*256)
				g=Math.floor(Math.random()*256)
				b=Math.floor(Math.random()*256)
				return 'rgb('+r+','+g+','+b+')'
			}
		}
	}
</script>

<style lang="scss">
.map{
	display: flex;
	margin-top: 10px;
}
.m2{
	width: 100px;
	height: 50px;
	text-align: center;
	border: 1px solid black;
}
</style>
